<template>
	<view class="service">
		<view class="nav">
			<uni-nav-bar leftWidth="200rpx" :border="false" rightWidth="200rpx" title="服务管理" left-icon="back"
				@clickLeft="back" backgroundColor="transparent">
				<block slot="right">
					<view class="address" @click="$util.toUrl('/pages/manage/service/list')">
						<uni-icons type="plus" color="#2E7EFA" :size="20"></uni-icons>
						<text class="hidden" style="flex: 1;">添加</text>
					</view>
				</block>
			</uni-nav-bar>
		</view>

		<view class="list flex_r_between" v-for="(item,index) in 0" :key="index" @click="chooseService(item)">
			<view class="left">
				<image src="/static/logo.png" mode="aspectFill"></image>
				<view class="info">
					<view class="name flex">
						<view>服务名字</view>
					</view>
					<view class="text">服务时长: 70分钟 理疗流程: 仰/俯卧位(头部、</view>
					<view class="price flex">
						218 <text>元/次</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="blank flex_c" v-if="true">
			<image src="https://qiniu-cdn.maeiyun.com/imgs/blank/no_service.png"></image>
			<text>暂无服务</text>
			<view @click="$util.toUrl('/pages/manage/service/list')">请添加服务</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectList:[],
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getList(){
				this.$get('store.service/getList').then(res=>{
					console.log(res);
				})
			},
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="less" scoped>
	.service {
		padding: calc(var(--status-bar-height) + 44px) 30rpx 30rpx;
		min-height: 100vh;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-size: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;

		.address {
			display: flex;
			align-items: center;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			padding: 0 20rpx 0 5rpx;

			text {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-left: 6rpx;
			}
		}
	}


	.list {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 35rpx 30rpx 30rpx;
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-end;

		.left {
			display: flex;

			image {
				width: 160rpx;
				height: 241rpx;
				margin-right: 31rpx;
			}

			.info {
				.name {
					align-items: center;

					view {
						font-size: 30rpx;
						font-weight: 600;
						color: #0F0807;
						line-height: 42rpx;
					}
				}
				.text {
					font-size: 22rpx;
					color: #888889;
					line-height: 30rpx;
					margin: 21rpx 0 31rpx;
				}
				.price {
					align-items: flex-end;
					font-size: 34rpx;
					font-weight: 600;
					color: #EF5233;
					line-height: 48rpx;

					text {
						font-size: 18rpx;
						color: #EC2700;
						line-height: 43rpx;
						margin-left: 6rpx;
					}
				}
			}
		}

		.right {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.btn {
		width: 100vw;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 27rpx 0 70rpx;
		box-sizing: border-box;
		.left {
			align-items: center;
			text {
				font-size: 30rpx;
				color: #0F0807;
				line-height: 42rpx;
				margin: 0 20rpx 0 2rpx;
			}
			i {
				font-style: normal;
				font-size: 26rpx;
				color: #929292;
				line-height: 37rpx;
			}
		}
		.right {
			width: 200rpx;
			height: 68rpx;
			background: #3393FF;
			border-radius: 34rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
		}
	}

	.blank {
		image {
			width: 155rpx;
			height: 156rpx;
		}
		text {
			font-size: 26rpx;
			color: #929292;
			line-height: 40rpx;
			margin: 25rpx 0 10rpx;
		}
		view {
			font-size: 28rpx;
			color: #3393FF;
			line-height: 40rpx;
		}
		margin-top: 100rpx;
	}

</style>